import React from 'react';
import { Animated, StyleSheet, View, Text, Platform } from 'react-native';

export default class Root extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      promptPosition: new Animated.Value(0),
    };
  }

  componentDidMount() {
    Animated.timing(this.state.promptPosition, {
      toValue: 1,
      duration: 200,
    }).start(() => {
      setTimeout(() => {
        Animated.timing(this.state.promptPosition, {
          toValue: 0,
          duration: 200,
        }).start();
      }, 5000);
    });
  }

  render() {
    const positionY = this.state.promptPosition.interpolate({
      inputRange: [0, 1],
      outputRange: [-30, Platform.OS === 'ios' ? 20 : 0],
    });
    return (
      <View style={{ flex: 1 }}>
        <Animated.View style={[styles.netInfoView, { top: positionY }]}>
          <Text style={styles.netInfoPrompt}>{this.props.prompting}</Text>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  netInfoView: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 30,
    position: 'absolute',
    right: 0,
    left: 0,
    backgroundColor: '#DC4437',
  },
  netInfoPrompt: {
    color: 'white',
    fontWeight: 'bold',
  },
});
